<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>
        Add edges to a SceneLayer | Sample | ArcGIS API for JavaScript 4.18
    </title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #controls {
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.9);
        }
    </style>
    <link rel="stylesheet"
            href="https://js.arcgis.com/4.18/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/WebScene",
            "esri/views/SceneView",
            "esri/layers/SceneLayer",
            "esri/widgets/Legend"
        ], function (WebScene, SceneView, SceneLayer, Legend) {
            var sceneLayer = new SceneLayer({
                portalItem: {
                    id: "f5c497819a374941b0ce8d9b0e979819"
                },
                title: "San Francisco buildings",
                renderer:{
                    //自动创建SimpleRenderer对象,此渲染器可用于简单地可视化地理要素的位置。例如，代表政治边界、城市、建筑物、河流等的层，这些层通常用于在应用程序中提供地理上下文，可以用每层单个符号来定义。
                    type: "simple",
                    symbol: {
                        type: "mesh-3d",//渲染 3D 网格特征
                        //符号图层用于定义点、折线、多边形和使用3D 符号渲染的网格几何图形的可视化
                        symbolLayers: [
                            {
                                //fill面填充,water水纹状,text文本状,line线等
                                type: "fill",
                                material: {
                                    color: "#ee0c0c",
                                    colorMixMode: "replace",//去除白膜颜色,用当前颜色代替
                                },
                                edges: {//在 3D 对象上设置轮廓边缘
                                    type: "solid",
                                    color: [0, 0, 0, 0.6],
                                    size: 1
                                }
                            }
                        ]
                    }
                }
            });

            var webscene = new WebScene({
                portalItem: {
                    id: "12d629fc946845628011f17a963373a9"
                },
                layers: [sceneLayer]
            });

            var view = new SceneView({
                container: "viewDiv",
                map: webscene
            });

            var legend = new Legend({
                view: view
            });
            view.ui.add(legend, "bottom-right");


            document.getElementById("controls")
                .addEventListener("click", function (event) {

                    if (event.target.id === "sketchEdges") {
                    } else if (event.target.id === "solidEdges") {
                    } else if (event.target.id === "noEdges") {
                    }
                });

            view.ui.add(document.getElementById("controls"), "top-right");
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div id="controls" class="esri-widget">
    <input type="radio" id="solidEdges" name="edges" checked />
    <label for="solidEdges">Solid edges</label>
    <input type="radio" id="sketchEdges" name="edges" />
    <label for="sketchEdges">Sketch edges</label>
    <input type="radio" id="noEdges" name="edges" /><label for="noEdges"
>No edges</label
>
</div>
</body>
</html>
